<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词伙伴 - AI单词</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            color: #334155;
        }
        .app-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .nav-bar {            height: 50px;
            background: rgba(241, 245, 249, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            color: #1e293b;
        }
        .tab-bar {
            height: 70px;
            background: rgba(241, 245, 249, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 10;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(30, 41, 59, 0.7);
            font-size: 10px;
            transition: all 0.3s ease;
        }
        .tab-item.active {
            color: #1e293b;
        }
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        .content {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            padding-bottom: 90px;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }
        .model-container {
            width: 100%;
            height: 400px;
            position: relative;
            margin-bottom: 20px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            transform: scale(1);
            transition: transform 0.3s ease;
            z-index: 5;
        }
        .model-container:hover {
            transform: scale(1.02);
        }
        #model-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        .buddy-info-panel {
            width: 100%;
            background: rgba(241, 245, 249, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(100, 116, 139, 0.3);
            margin-bottom: 20px;
            color: #1e293b;
        }
        .buddy-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
        }
        .buddy-level {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }
        .level-badge {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 14px;
            font-weight: bold;
        }
        .progress-container {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            height: 8px;
            border-radius: 4px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #f97316, #3b82f6);
            border-radius: 4px;
            width: 65%;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        }
        .stats-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        .stat-value {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 12px;
            color: rgba(30, 41, 59, 0.7);
        }
        .growth-info {
            text-align: center;
            font-size: 14px;
            color: #1e293b;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .model-controls {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 18px;
            z-index: 10;
        }
        .control-btn {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: rgba(59, 130, 246, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #1e40af;
            font-size: 20px;
            border: 1px solid rgba(59, 130, 246, 0.4);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .control-btn:hover {
            background: rgba(59, 130, 246, 0.3);
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }
        .control-btn.active {
            background: rgba(59, 130, 246, 0.4);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
            color: #1e40af;
        }
        .achievement-section {
            width: 100%;
            background: rgba(241, 245, 249, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(100, 116, 139, 0.3);
            color: #1e293b;
        }
        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .section-title i {
            margin-right: 10px;
        }
        .achievement-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        .achievement-item {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .achievement-item.locked {
            opacity: 0.5;
        }
        .achievement-icon {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .achievement-name {
            font-size: 12px;
            text-align: center;
            margin-bottom: 5px;
        }
        .achievement-desc {
            font-size: 10px;
            color: rgba(30, 41, 59, 0.6);
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="nav-bar">
            <div>
                <i class="fas fa-arrow-left mr-3"></i>
                <span>单词伙伴</span>
            </div>
            <div>
                <i class="fas fa-ellipsis-vertical"></i>
            </div>
        </div>
        
        <div class="content">
            <div class="model-container">
                <canvas id="model-canvas"></canvas>
                
                <div class="model-controls">
                    <div class="control-btn" id="rotate-btn" title="旋转">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <div class="control-btn" id="zoom-btn" title="放大">
                        <i class="fas fa-search-plus"></i>
                    </div>
                    <div class="control-btn" id="share-btn" title="分享">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <div class="control-btn" id="screenshot-btn" title="截图">
                        <i class="fas fa-camera"></i>
                    </div>
                    <div class="control-btn" id="ar-btn" title="AR展示">
                        <i class="fas fa-cube"></i>
                    </div>
                </div>
            </div>
            
            <div class="buddy-info-panel">
                <div class="buddy-name">词灵精灵</div>
                <div class="buddy-level">
                    <div class="level-badge">Lv. 7</div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-bar"></div>
                </div>
                
                <div class="growth-info">
                    距离下一级还需要学习 <strong>15</strong> 天
                </div>
                
                <div class="stats-container">
                    <div class="stat-item">
                        <div class="stat-value">32</div>
                        <div class="stat-label">连续学习天数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">487</div>
                        <div class="stat-label">已掌握单词</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">8</div>
                        <div class="stat-label">成长阶段</div>
                    </div>
                </div>
            </div>
            
            <div class="achievement-section">
                <div class="section-title">
                    <i class="fas fa-trophy"></i>
                    <span>成就徽章</span>
                </div>
                
                <div class="achievement-grid">
                    <div class="achievement-item">
                        <div class="achievement-icon">🔥</div>
                        <div class="achievement-name">坚持不懈</div>
                        <div class="achievement-desc">连续学习30天</div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">📚</div>
                        <div class="achievement-name">词汇大师</div>
                        <div class="achievement-desc">掌握500个单词</div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">⚡</div>
                        <div class="achievement-name">速记能手</div>
                        <div class="achievement-desc">单日记忆50个单词</div>
                    </div>
                    <div class="achievement-item locked">
                        <div class="achievement-icon">🌟</div>
                        <div class="achievement-name">完美记忆</div>
                        <div class="achievement-desc">复习正确率达95%</div>
                    </div>
                    <div class="achievement-item locked">
                        <div class="achievement-icon">🏆</div>
                        <div class="achievement-name">学习冠军</div>
                        <div class="achievement-desc">排行榜前10名</div>
                    </div>
                    <div class="achievement-item locked">
                        <div class="achievement-icon">🚀</div>
                        <div class="achievement-name">突破极限</div>
                        <div class="achievement-desc">连续学习100天</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tab-bar">
            <div class="tab-item">
                <div class="tab-icon"><i class="fas fa-book"></i></div>
                <div>学习</div>
            </div>
            <div class="tab-item active">
                <div class="tab-icon"><i class="fas fa-dragon"></i></div>
                <div>伙伴</div>
            </div>
            <div class="tab-item">
                <div class="tab-icon"><i class="fas fa-user"></i></div>
                <div>我的</div>
            </div>
        </div>
    </div>
    
    <script>
        // Three.js 初始化
        let scene, camera, renderer, controls, model;
        let autoRotate = false;
        
        function initThree() {
            // 创建场景
            scene = new THREE.Scene();
            // 使用透明背景，让模型更加突出
            scene.background = null;
            
            // 创建相机
            const container = document.querySelector('.model-container');
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;
            camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 0.1, 1000);
            camera.position.z = 5;
            
            // 创建渲染器
            const canvas = document.getElementById('model-canvas');
            renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
            renderer.setSize(containerWidth, containerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setClearColor(0x000000, 0); // 透明背景
            
            // 添加环境光
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
            scene.add(ambientLight);
            
            // 添加定向光
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
            directionalLight.position.set(5, 5, 5);
            scene.add(directionalLight);
            
            // 添加点光源，增强模型立体感
            const pointLight = new THREE.PointLight(0x4ade80, 1, 100);
            pointLight.position.set(-5, 0, 5);
            scene.add(pointLight);
            
            // 添加第二个点光源
            const pointLight2 = new THREE.PointLight(0x22d3ee, 1, 100);
            pointLight2.position.set(5, -5, 5);
            scene.add(pointLight2);
            
            // 添加控制器
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            controls.enableZoom = true;
            controls.autoRotate = false;
            controls.autoRotateSpeed = 1;
            
            // 创建一个简单的3D模型（可替换为更复杂的模型）
            createSimpleModel();
            
            // 响应窗口大小变化
            window.addEventListener('resize', onWindowResize);
            
            // 开始动画循环
            animate();
        }
        
        function createSimpleModel() {
            // 创建一个更有趣的角色模型
            // 在实际应用中，这里可以加载GLTF模型
            
            // 创建一个组合体作为词灵精灵
            const group = new THREE.Group();
            
            // 创建头部（主体）
            const headGeometry = new THREE.IcosahedronGeometry(1.5, 2);
            const headMaterial = new THREE.MeshPhysicalMaterial({
                color: 0x4ade80,
                metalness: 0.1,
                roughness: 0.4,
                clearcoat: 1.0,
                clearcoatRoughness: 0.1,
                emissive: 0x072f37,
                emissiveIntensity: 0.5,
                transmission: 0.2, // 半透明效果
                transparent: true,
                opacity: 0.9
            });
            const head = new THREE.Mesh(headGeometry, headMaterial);
            group.add(head);
            
            // 创建眼睛
            const eyeGeometry = new THREE.SphereGeometry(0.2, 16, 16);
            const eyeMaterial = new THREE.MeshPhongMaterial({
                color: 0xffffff,
                emissive: 0x22d3ee,
                emissiveIntensity: 0.5,
                specular: 0xffffff
            });
            
            // 左眼
            const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            leftEye.position.set(-0.5, 0.3, 1.2);
            group.add(leftEye);
            
            // 右眼
            const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            rightEye.position.set(0.5, 0.3, 1.2);
            group.add(rightEye);
            
            // 创建小翅膀
            const wingGeometry = new THREE.ConeGeometry(0.5, 1.5, 4);
            const wingMaterial = new THREE.MeshPhysicalMaterial({
                color: 0x22d3ee,
                metalness: 0.1,
                roughness: 0.3,
                clearcoat: 0.5,
                emissive: 0x0891b2,
                emissiveIntensity: 0.3,
                side: THREE.DoubleSide
            });
            
            // 左翅膀
            const leftWing = new THREE.Mesh(wingGeometry, wingMaterial);
            leftWing.position.set(-1.2, 0, 0);
            leftWing.rotation.z = Math.PI / 2;
            leftWing.rotation.y = Math.PI / 6;
            group.add(leftWing);
            
            // 右翅膀
            const rightWing = new THREE.Mesh(wingGeometry, wingMaterial);
            rightWing.position.set(1.2, 0, 0);
            rightWing.rotation.z = -Math.PI / 2;
            rightWing.rotation.y = -Math.PI / 6;
            group.add(rightWing);
            
            // 添加一个光环
            const ringGeometry = new THREE.TorusGeometry(2, 0.1, 16, 50);
            const ringMaterial = new THREE.MeshPhongMaterial({
                color: 0xf9a8d4,
                emissive: 0xec4899,
                emissiveIntensity: 0.5,
                transparent: true,
                opacity: 0.7
            });
            const ring = new THREE.Mesh(ringGeometry, ringMaterial);
            ring.rotation.x = Math.PI / 2;
            ring.position.y = 1;
            group.add(ring);
            
            // 设置整个组为模型
            model = group;
            scene.add(model);
            
            // 添加动画效果
            function animateModel() {
                // 上下浮动动画
                model.position.y = Math.sin(Date.now() * 0.001) * 0.2;
                // 翅膀轻微摆动
                leftWing.rotation.y = Math.PI / 6 + Math.sin(Date.now() * 0.003) * 0.2;
                rightWing.rotation.y = -Math.PI / 6 - Math.sin(Date.now() * 0.003) * 0.2;
                // 光环旋转
                ring.rotation.z += 0.005;
                
                requestAnimationFrame(animateModel);
            }
            
            animateModel();
            
            // 添加一些装饰元素
            addDecorations();
        }
        
        function addDecorations() {
            // 创建多种颜色的粒子系统，代表单词和知识点
            createParticleSystem(0xf9a8d4, 0.05, 100, 8, 0.0008, 0.0005); // 粉色粒子
            createParticleSystem(0x22d3ee, 0.04, 80, 6, 0.0005, 0.0008); // 蓝色粒子
            createParticleSystem(0x4ade80, 0.03, 120, 10, 0.0003, 0.0006); // 绿色粒子
            
            // 添加一些小星星点缀
            addStars();
        }
        
        function createParticleSystem(color, size, count, spread, rotationX, rotationY) {
            const particlesGeometry = new THREE.BufferGeometry();
            const posArray = new Float32Array(count * 3);
            
            for(let i = 0; i < count * 3; i += 3) {
                // 创建螺旋状分布的粒子
                const radius = Math.random() * spread;
                const angle = Math.random() * Math.PI * 2;
                
                posArray[i] = Math.cos(angle) * radius;
                posArray[i+1] = (Math.random() - 0.5) * spread;
                posArray[i+2] = Math.sin(angle) * radius;
            }
            
            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
            
            const particlesMaterial = new THREE.PointsMaterial({
                size: size,
                color: color,
                transparent: true,
                opacity: 0.8,
                blending: THREE.AdditiveBlending, // 添加混合模式，使粒子更亮
                depthWrite: false // 避免深度写入问题
            });
            
            const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
            scene.add(particlesMesh);
            
            // 添加动画效果
            function animateParticles() {
                particlesMesh.rotation.x += rotationX;
                particlesMesh.rotation.y += rotationY;
                particlesMesh.rotation.z += (rotationX + rotationY) / 4;
                requestAnimationFrame(animateParticles);
            }
            
            animateParticles();
        }
        
        function addStars() {
            // 添加一些小星星作为背景点缀
            const starsGeometry = new THREE.BufferGeometry();
            const starsCount = 50;
            const starsPositions = new Float32Array(starsCount * 3);
            
            for(let i = 0; i < starsCount * 3; i += 3) {
                starsPositions[i] = (Math.random() - 0.5) * 20;
                starsPositions[i+1] = (Math.random() - 0.5) * 20;
                starsPositions[i+2] = (Math.random() - 0.5) * 20 - 5; // 放在模型后面
            }
            
            starsGeometry.setAttribute('position', new THREE.BufferAttribute(starsPositions, 3));
            
            const starsMaterial = new THREE.PointsMaterial({
                size: 0.1,
                color: 0xffffff,
                transparent: true,
                opacity: 0.9,
                blending: THREE.AdditiveBlending
            });
            
            const starsMesh = new THREE.Points(starsGeometry, starsMaterial);
            scene.add(starsMesh);
            
            // 星星闪烁效果
            function animateStars() {
                starsMaterial.size = 0.1 + Math.sin(Date.now() * 0.001) * 0.05;
                requestAnimationFrame(animateStars);
            }
            
            animateStars();
        }
        
        function onWindowResize() {
            const container = document.querySelector('.model-container');
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;
            
            camera.aspect = containerWidth / containerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(containerWidth, containerHeight);
        }
        
        function animate() {
            requestAnimationFrame(animate);
            
            // 更新控制器
            controls.update();
            
            // 渲染场景
            renderer.render(scene, camera);
            
            // 确保模型始终在视野中心
            if (model) {
                model.rotation.y += controls.autoRotate ? 0.01 : 0;
            }
        }
        
        // 初始化Three.js
        document.addEventListener('DOMContentLoaded', initThree);
        
        // 控制按钮功能
        document.getElementById('rotate-btn').addEventListener('click', function() {
            this.classList.toggle('active');
            controls.autoRotate = !controls.autoRotate;
            // 更新按钮提示
            this.title = controls.autoRotate ? "停止旋转" : "开始旋转";
        });
        
        document.getElementById('zoom-btn').addEventListener('click', function() {
            // 更平滑的缩放效果
            const targetZ = camera.position.z > 3.5 ? 3 : 5;
            const startZ = camera.position.z;
            const duration = 500; // 毫秒
            const startTime = Date.now();
            
            function zoomAnimate() {
                const elapsed = Date.now() - startTime;
                const progress = Math.min(elapsed / duration, 1);
                // 使用缓动函数使动画更自然
                const easeProgress = 1 - Math.pow(1 - progress, 3);
                
                camera.position.z = startZ + (targetZ - startZ) * easeProgress;
                
                if (progress < 1) {
                    requestAnimationFrame(zoomAnimate);
                }
            }
            
            zoomAnimate();
            
            // 更新按钮状态
            this.classList.toggle('active');
            setTimeout(() => this.classList.toggle('active'), 500);
        });
        
        document.getElementById('share-btn').addEventListener('click', function() {
            alert('分享功能将在正式版本中启用');
        });
        
        document.getElementById('screenshot-btn').addEventListener('click', function() {
            // 截图功能
            const link = document.createElement('a');
            link.download = 'nft-buddy-screenshot.png';
            link.href = renderer.domElement.toDataURL('image/png');
            link.click();
        });
        
        document.getElementById('ar-btn').addEventListener('click', function() {
            alert('AR展示功能将在正式版本中启用');
        });
    </script>
</body>
</html>